<template>
  <el-row>
    <el-row :gutter="15">

      <!-- 查询条件 -->
      <el-col :span="18">
        <ElCard style="height: 28vh">
          <div slot="header">
            <span>查询条件</span>
            <el-button
                @click="resettingSelectOption"
                style="float: right"
                type="primary"
                size="mini">
              重置查询条件
            </el-button>
          </div>

          <SelectForm
              @selectChange="selectChange"
              :Reset="resettingFlag"
          />

        </ElCard>
      </el-col>

      <!-- 地图 -->
      <el-col
          :span="6">
        <ElCard style="height: 28vh">
          <div
              slot="header">
            <span>发现位置</span>
            <el-button
                @click="isMapVisiable=true"
                style="float: right"
                type="primary"
                size="mini">放大
            </el-button>
            <el-switch
                v-model="showSatelite"
                inactive-text="卫星图"
                style="float: right;margin-right: .5vw"
            >
            </el-switch>
          </div>
          <el-row style="height: 20vh">
            <Map
                :mark="mark"
                :mapInfo="mapSetting"
                :showSatelite="showSatelite"
            ></Map>
          </el-row>
        </ElCard>
      </el-col>

    </el-row>

    <!-- 表格 -->
    <el-row
        style="margin-top: 1vh">
      <ElCard style="height: auto">
        <span
            slot="header">黑广播列表</span>
        <Table
            :needSelect="needSelect"
            :selectForm="selectForm"
            @rowClick="tableRowClick"/>
      </ElCard>
    </el-row>

    <!--------------- 弹窗 --------------->
    <Dialog
        :visiable="isMapVisiable"
        @close="isMapVisiable=false"
        :info="{title:'查看地图',width:'75%'}"
    >
      <div slot="header">
        <span>查看地图</span>
        <el-switch
            v-model="showSateliteDialog"
            inactive-text="卫星图"
            style="float: right;margin-right: 2vw"
        >
        </el-switch>
      </div>
      <el-row
          style="height: 65vh">
        <Map
            :mark="mark"
            :mapInfo="mapSetting"
            :showSatelite="showSateliteDialog"
        ></Map>
      </el-row>
    </Dialog>

  </el-row>
</template>

<script>
// --------------- element-ui ---------------------
import ElCard from "../../../../components/element-ui/elCard"
import Dialog from "../../../../components/element-ui/dialog"
//--------------- AMap ------------------
import Map from "../../../../components/AMap/views/map-Satelite";
import {mapSetting} from "../../../../components/AMap/map_setting"
// ------------- 自定义组件 ----------------
import SelectForm from "./broadcast-cpt/selectForm"
import Table from "./broadcast-cpt/table"

export default {
  components: {
    ElCard,
    Map,
    Dialog,
    SelectForm,
    Table
  },
  computed: {
    mapSetting: function () {
      return mapSetting("brocast")
    }
  },
  data() {
    return {
      // ----------- 弹窗 -------------
      isMapVisiable: false,
      //  ----------- 查询表单 --------------
      resettingFlag: false, // 重置查询条件标识
      selectForm: {},
      showSatelite: true,// 是否展示卫星图
      showSateliteDialog: true,// 是否展示卫星图
      needSelect: false, // 表格是否需要检索
      //  ------------- 地图 ----------------
      mark: {}
    }
  },
  methods: {
    // -------------- 查询功能 --------------

    /**
     * 重置查询条件
     * */
    resettingSelectOption: function () {
      this.resettingFlag = !this.resettingFlag;
      this.needSelect = false;
    },
    //  ------------ 事件 --------------

    /**
     * 表格行被点击
     * @param val
     */
    tableRowClick: function (val) {
      this.mark = val;
    },
    selectChange: function (val) {
      this.mark = {};
      this.selectForm = val;
      this.needSelect = true;
    }
  }
}
</script>

<style>
.el-form {
  text-align: left;
}

.el-form-item {
  margin-left: 1.5vw;
}
</style>